﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxNavigationBar Directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.people = [{
                id: 1,
                name: "Nancy",
                age: 52
            }, {
                id: 2,
                name: "Andrew",
                age: 31
            }, {
                id: 3,
                name: "Robert",
                age: 40
            }, {
                id: 4,
                name: "Peter",
                age: 28
            }];
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-navigation-bar jqx-width="'200px'" jqx-height="'250px'">
            <div>{{people[0].name}}</div>
            <div>
                Id: {{people[0].id}}
                <br />
                Name: {{people[0].name}}
                <br />
                Age: {{people[0].age}}
            </div>
            <div>{{people[1].name}}</div>
            <div>
                Id: {{people[1].id}}
                <br />
                Name: {{people[1].name}}
                <br />
                Age: {{people[1].age}}
            </div>
            <div>{{people[2].name}}</div>
            <div>
                Id: {{people[2].id}}
                <br />
                Name: {{people[2].name}}
                <br />
                Age: {{people[2].age}}
            </div>
            <div>{{people[3].name}}</div>
            <div>
                Id: {{people[3].id}}
                <br />
                Name: {{people[3].name}}
                <br />
                Age: {{people[3].age}}
            </div>
         </jqx-navigation-bar>
    </div>
</body>
</html>
